11. The Box Revisited

The Box Revisited

Question:

Start Quiz:

Solution:

INSTRUCTOR NOTE:

Web Pages Demonstrated in this Video

  1. Box Model page (box-model.html). In video: 00:00-03:21.
  2. Style 1 page (style-1.html). In video: 04:33-06:01.
  3. My Favorite App (mock1-fav-app.pdf). In video 06:02 - 06:15.

Note that some browser plugins will interfere and try to access these links via the HTTPS protocol. If you get an error: "403. That’s an error. Your client does not have permission to get URL /courses/html-css/samples/box-model.html from this server. That’s all we know. " try disabling your browser extensions or plugins.

CSS to Use for Quiz

In your style.css you should set the screenshot class to max-width of 460px, and the description to 705px.
The other things to set in your style.css file are the box-sizing definitions and the outline that allows you to easily see all the boxes on your page. Put the following in your style.css file:

* {
   outline: 1px solid red !important;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}